<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<script setup>
import {ref} from 'vue';
import {message} from 'ant-design-vue';
import dayjs from 'dayjs';
import axios from "axios";
import {jsPDF} from "jspdf";
import router from "../../router/router.js";

const dateRange = ref([dayjs(), dayjs().add(1, 'year')]);
const formattedStartDate = dayjs(dateRange.value[0]).format('YYYY年MM月DD日');
const formattedEndDate = dayjs(dateRange.value[1]).format('YYYY年MM月DD日');

const userInfo = ref({
  name: '',
  phone: '',
  idCard: ''
});

const title = sessionStorage.getItem("houseTitle");

const area = sessionStorage.getItem("houseArea");
const rent = sessionStorage.getItem("houseRent");
const houseId = sessionStorage.getItem("houseId");
const ownerId = sessionStorage.getItem("ownerId");
const ownerPhone = sessionStorage.getItem("ownerPhone")
const agreed = ref(false);
const ownerName = sessionStorage.getItem("ownerName")
const contractContent = ref(`
房屋租赁合同

甲方（出租方）：${ownerName}
乙方（承租方）：${userInfo.value.name}

根据《中华人民共和国民法典》及有关规定，甲乙双方在平等、自愿的基础上，就房屋租赁事宜达成协议如下：

第一条 房屋基本情况
1.1 房屋坐落于：北京市朝阳区望京街道望京 SOHO T1 栋 2008 室
1.2 房屋建筑面积：89平方米
1.3 房屋用途：居住

第二条 租赁期限
2.1 租赁期限自
${formattedStartDate}起${formattedEndDate}止
2.2 租金支付方式：月付
2.3 月租金：人民币陆仟捌佰元整（¥6,800）

第三条 付款方式
3.1 乙方应在每月2日前向甲方支付下个月的租金
3.2 支付方式：银行转账
`);

const handleBack = () => {
  window.history.back();
};


const viewAgreement = () => {
  message.info('查看服务协议');
};

const handleSign = async () => {
  try {
    const data = {
      houseId: houseId,
      startTime: dayjs(dateRange.value[0]).format('YYYY-MM-DD'),
      endTime: dayjs(dateRange.value[1]).format('YYYY-MM-DD'),
      contractFile: contractContent.value,
      tenantName: userInfo.value.name,
      tenantPhone: userInfo.value.phone,
      tenantIdCard: userInfo.value.idCard,
    }
    const responseAll = await axios.post(`${window.link}/user/contract`, data, {
      headers: {
        "access-token": localStorage.getItem("access-token"),
        'Content-Type': 'application/json'
      }
    })
    if (responseAll.data.code === 200) {
      message.success(responseAll.data.message)
    } else {
      message.error(responseAll.data.message);
    }
  } catch (error) {
    console.log("发送总值错误")
    message.error("发送总值错误")
  }
}

const showCustomerService = () => {
  message.info('打开在线客服');
};

const showHelp = () => {
  message.info('打开帮助中心');
};

</script>
<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 头部导航 -->
    <header class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50">
      <div class="max-w-7xl mx-auto px-4 h-16 flex items-center">
        <button class="!rounded-button flex items-center text-gray-600" @click="handleBack">
          <i class="fas fa-arrow-left mr-2"></i>
          返回
        </button>
        <h1 class="text-xl font-medium ml-4">在线签约</h1>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="max-w-3xl mx-auto pt-20 pb-32 px-4">
      <!-- 房屋基本信息 -->
      <div class="bg-white rounded-lg p-6 mb-6">
        <h2 class="text-lg font-medium mb-4">{{ title }}</h2>
        <div class="space-y-4">
          <div class="flex items-start">
            <span class="text-gray-500 w-24">房屋地址：</span>
            <span class="flex-1">{{ area }}</span>
          </div>
          <div class="flex items-center">
            <span class="text-gray-500 w-24">租期时间：</span>
            <a-range-picker v-model:value="dateRange" class="!rounded-button"/>
          </div>
          <div class="flex items-center">
            <span class="text-gray-500 w-24">月租金：</span>
            <span class="text-red-500 font-medium">{{ rent }}</span>
          </div>
        </div>
      </div>

      <!-- 签约人信息 -->
      <div class="bg-white rounded-lg p-6 mb-6">
        <h2 class="text-lg font-medium mb-4">房东信息</h2>
        <div class="space-y-4">
          <div class="flex items-center">
            <span class="text-gray-500 w-24">姓名：</span>
            {{ ownerName }}
          </div>
          <div class="flex items-center">
            <span class="text-gray-500 w-24">手机号：</span>
            {{ ownerPhone }}
          </div>
          <div class="flex items-center">
            <span class="text-gray-500 w-24">身份证号：</span>
            ************{{ ownerId }}
          </div>
        </div>
      </div>

      <div class="bg-white rounded-lg p-6 mb-6">
        <h2 class="text-lg font-medium mb-4">租客信息</h2>
        <div class="space-y-4">
          <div class="flex items-center">
            <span class="text-gray-500 w-24">姓名：</span>
            <a-input v-model:value="userInfo.name" placeholder="请输入租客姓名" class="!rounded-button flex-1"/>
          </div>
          <div class="flex items-center">
            <span class="text-gray-500 w-24">手机号：</span>
            <a-input v-model:value="userInfo.phone" placeholder="请输入租客手机号" class="!rounded-button flex-1"/>
          </div>
          <div class="flex items-center">
            <span class="text-gray-500 w-24">身份证号：</span>
            <a-input v-model:value="userInfo.idCard" placeholder="请输入租客身份证号" class="!rounded-button flex-1"/>
          </div>
        </div>
      </div>

      <!-- 合同预览 -->
      <div class="bg-white rounded-lg p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-lg font-medium">电子合同预览</h2>
        </div>
        <div class="h-64 overflow-y-auto border rounded-lg p-4 text-gray-600 text-sm">
          {{ contractContent }}
        </div>
      </div>

      <!-- 同意协议 -->
      <div class="flex items-center mb-6">
        <a-checkbox v-model:checked="agreed">
          我已阅读并签署个人信息
        </a-checkbox>
      </div>
    </main>

    <!-- 底部操作区 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white border-t">
      <div class="max-w-3xl mx-auto px-4 py-4">
        <button
            class="!rounded-button w-full bg-blue-600 text-white h-12 font-medium disabled:opacity-50"
            :disabled="!agreed"
            @click="handleSign"
        >
          确认签约
        </button>
        <p class="text-center text-gray-500 text-sm mt-2">签约后将通过短信通知双方，请注意查收</p>
      </div>
    </footer>
  </div>
</template>


<style scoped>
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>

